<template>
  <div :class="['home-slide', isFold ? 'fold-home-slide' : '']">
    <el-scrollbar class="slide-content">
      <div class="slide-menu">
        <div class="menu-item" v-for="itm1 in leftNavMenus" :key="itm1.belongPage">
          <div
            class="menu-item-title"
            :class="{
              'menu-item-title-menu': (!itm1.menuVOS || (itm1.menuVOS && itm1.menuVOS.length === 0)) && itm1.menuName,
              actived: pMenu === itm1.belongPage,
            }"
            @click.stop="toRoutePage(itm1.belongPage, itm1.belongPage, itm1.menuVOS || [])">
            <el-popover
              :disabled="!isFold || !itm1.menuVOS"
              placement="right"
              trigger="hover"
              popper-class="fold-menu-box">
              <i v-if="itm1.menuVOS?.length" slot="reference" :class="itm1.menuImagePath"></i>
              <el-tooltip v-else slot="reference" :disabled="!isFold" :content="itm1.menuName" placement="right">
                <i :class="itm1.menuImagePath"></i>
              </el-tooltip>
              <ul v-if="itm1.menuVOS && itm1.menuVOS.length" class="menu-item-list">
                <li
                  :class="['menu-item-li', activeName === item.belongPage ? 'actived' : '']"
                  v-for="item in itm1.menuVOS"
                  :key="item.belongPage"
                  @click.stop="toRoutePage2(item.belongPage, itm1.belongPage)">
                  {{ item.menuName }}
                </li>
              </ul>
            </el-popover>
            <span v-if="!isFold" class="menu-name syht16-bold">{{ itm1.menuName }}</span>
          </div>
          <ul class="menu-item-list" v-if="itm1.menuVOS && itm1.menuVOS.length">
            <li
              :class="['menu-item-li', activeName === itm2.belongPage ? 'actived' : '']"
              v-for="itm2 in itm1.menuVOS"
              :key="itm2.belongPage"
              @click.stop="toRoutePage(itm2.belongPage, itm1.belongPage, [])">
              <span v-if="!isFold" class="menu-name">{{ itm2.menuName }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-scrollbar>
    <div v-if="!isFold" class="version-info">
      <!-- <version-label></version-label> -->
    </div>
    <div class="fold-box" tm-bg-p @click.stop="toggleFold">
      <i :class="['fold-btn', !isFold ? 'el-icon-s-fold' : 'el-icon-s-unfold']" :title="isFold ? '展开' : '收起'"></i>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// import VersionLabel from '../../version/VersionLabel.vue'

export default {
  name: 'HomeSlide',
  components: {
    // VersionLabel
  },
  data() {
    return {
      activeName: '',
      pMenu: '',
      isFold: false,
    }
  },
  watch: {
    '$route.name': {
      handler(val) {
        this.activeName = val || ''
        const pMenuItem =
          this.leftNavMenus &&
          this.leftNavMenus.find(mItem => {
            if (mItem.menuVOS && mItem.menuVOS.length) {
              return mItem.menuVOS.find(item => item.belongPage === this.activeName) !== undefined
            } else {
              return mItem.belongPage === this.activeName
            }
          })
        if (pMenuItem) {
          this.pMenu = pMenuItem.belongPage
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['leftNavMenus', 'permissions']),
  },
  created() {
    // console.log(this.leftNavMenus)
  },
  methods: {
    toggleFold() {
      this.isFold = !this.isFold
    },
    toRoutePage(name, pMenu, children) {
      // if (this.isFold) {
      //   return false
      // }
      if (name === this.activeName) {
        return false
      }
      if (children.length === 0) {
        this.activeName = name
        this.pMenu = pMenu
        this.$router.push({ name: name })
      }
    },
    toRoutePage2(name, pMenu) {
      if (name === this.activeName) {
        return false
      }
      this.activeName = name
      this.pMenu = pMenu
      this.$router.push({ name: name })
    },
  },
}
</script>
<style lang="scss" scoped>
.home-slide {
  width: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  border-radius: 12px;
  // background: #f3f9ff;
  // background-image: url('../../assets/images/slide-nav-bgi.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;

  .slide-content {
    flex: 1;
    overflow: hidden;
  }

  .slide-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0 12px 12px;

    .menu-item {
      width: 100%;
      position: relative;
      overflow: hidden;

      &-title {
        padding-left: 20px;
        font-size: 16px;
        line-height: 48px;
        margin-bottom: 10px;
        position: relative;
        i {
          font-size: 22px;
          font-weight: normal;
          vertical-align: middle;
          padding-right: 5px;
          padding-left: 10px;
        }
      }

      &-title-menu {
        padding-left: 20px;
        line-height: 48px;
        cursor: pointer;
        &.actived {
          background-color: rgba(0, 84, 196, 0.08);
          color: #3b93f7;
          font-weight: bold;
          border-radius: 4px;
          border-right: 4px solid #3b93f7;
        }
      }

      &-li {
        padding-left: 75px;
        font-size: 14px;
        line-height: 36px;
        margin-bottom: 10px;
        cursor: pointer;
        // color: #666;
        // border-radius: 4px;
      }

      &-li.actived {
        font-weight: bold;
      }
      .menu-name {
        padding-left: 10px;
        // vertical-align: middle;
      }
      .menu-item-li {
        line-height: 50px;
      }
    }
  }

  .version-info {
    text-align: center;
    padding: 10px;
  }
  .fold-box {
    height: 60px;
    padding: 10px 20px;
    cursor: pointer;
    .fold-btn {
      color: #3b93f7;
      font-size: 24px;
      padding: 8px;
    }
  }

  &.fold-home-slide {
    width: 60px;
    min-width: 60px;
    .slide-menu {
      padding: 15px 0px;
      .menu-item {
        &-title {
          text-align: center;
          padding: 0;
          i {
            padding: 0;
            cursor: pointer;
          }
        }
      }
    }
    .fold-box {
      padding: 10px 0;
      text-align: center;
    }
  }
}
@media screen and(max-width:1400px) {
  .home-slide {
    width: 200px;
  }
}
</style>
<style lang="scss">
.fold-menu-box.el-popover {
  .menu-item-list {
    .menu-item-li {
      padding-left: 10px;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      color: #666;
      // border-radius: 4px;
      &.actived,
      &:hover {
        background-color: #f1f7fd;
      }
      &.actived {
        color: #333;
      }
    }
  }
}
</style>
